<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Jpetstore后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <script src="../js/index.js"></script>

    <!-- 在线导入 -->
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <!-- 本地导入 -->

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>



</head>
<body>
<div id="app">

    <el-container style="height: 100%">
        <el-aside width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%">
            <el-menu :default-openeds="['1', '3']" style="height: 100%"
                     background-color="rgb(48,65,86)"
                     text-color="#fff"
                     :collapse="isCollapse"
            >
                <div style="height: 60px;line-height: 60px;text-align: center">、
                    <img src="/images/logo-topbar.gif">
                </div>

                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-s-home"></i>
                        <span slot="title">查看首页</span></template>
                    <el-menu-item index="1-1" @click="handleMainFormClick">首页信息</el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group title="分类选择">


                        <el-menu-item index="1-1-1" @click="handleCategory">分类选择</el-menu-item>



                    </el-menu-item-group>
                    <el-menu-item-group title="全部商品">
                        <el-menu-item index="1-2" @click="handleAllItem">全部商品</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>
                        <span slot="title">账户管理</span></template>
                    <el-menu-item index="2-1" @click="handleAccountClick">所有账户</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-setting"></i>
                        <span slot="title">个人中心</span></template>
                    <el-menu-item-group>
                        <template slot="title">个人中心</template>
                        <el-menu-item index="3-1" @click="handlePersonClick">个人中心</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title"><i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span></template>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container >
            <el-header style=" font-size: 12px; display: flex">
                <div style="flex:1;font-size: 18px; width: 200px">
                    <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
                </div>
                <div style="flex:1.2;font-size: 25px">
                    <b style="color: black">Jpetstore后台管理系统</b>
                </div>
                <el-dropdown>
                    <i class="el-icon-arrow-down"></i>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
                <span>朱阳</span>
            </el-header>
            <el-main>
                <div>

                    <br>
                    <br>
                    <b style="font-size: 25px ;color: rgb(255,158,13) ;margin-left: 40px">The CATEGORY Of JPetStore</b>
                    <BR>
                    <br>
                    <br>
                </div>
                <div class="image-container" style="display: flex ; justify-content: space-between;">
                    <div style="order: 1" @click="handleClick(1)">

                        <img src="../images/bird.png" alt="Image 1" style="width: 250px; height:auto; border-radius: 50%;overflow: hidden; " >
                        <el-button type="primary" round style="width:150px ;margin-top: 30px;margin-left: 50px">BIRDS</el-button>
                    </div>

                    <div style="order:2;" @click="handleClick(2)">
                        <img src="../images/cat.jpg" alt="Image 1" style="width: 250px; height: auto;  border-radius: 50%;overflow: hidden;" >
                        <el-button type="primary" round style="width:150px ;margin-top: 30px;margin-left: 50px">CATS</el-button>
                    </div>
                    <div style="order:3;" @click="handleClick(3)">
                        <img src="../images/dog.jpg" alt="Image 1" style="width: 250px; height: auto;   border-radius: 50%;overflow: hidden;" >
                        <el-button type="primary" round style="width:150px ;margin-top: 30px;margin-left: 50px">DOGS</el-button>

                    </div>
                    <div style="order:4;" @click="handleClick(4)">
                        <img src="../images/fish.png" alt="Image 1" style="width: 250px; height: auto;   border-radius: 50%;overflow: hidden;" >
                        <el-button type="primary" round style="width:150px ;margin-top: 30px;margin-left: 50px">FISH</el-button>

                    </div>
                    <div style="order:5;" @click="handleClick(5)">
                        <img src="../images/reptiles.webp" alt="Image 1" style="width: 250px; height: 250PX;   border-radius: 50%;overflow: hidden;" >
                        <el-button type="primary" round style="width:150px ;margin-top: 30px;margin-left: 50px">REPTILES</el-button>

                    </div>
                </div>
<!--                <div style="display: flex;margin-top: 30px" >-->
<!--                    <el-button type="primary" round style="width:150px ;margin-right: 107px;margin-left: 170px">BIRDS</el-button>-->
<!--                    <el-button type="primary" round style="width:150px ;margin-right: 117px">CAT</el-button>-->
<!--                    <el-button type="primary" round style="width:150px ;margin-right: 120px">DOG</el-button>-->
<!--                    <el-button type="primary" round style="width:150px ;margin-right: 120px">FISH</el-button>-->
<!--                    <el-button type="primary" round style="width:150px ;margin-right: 100px">REPTILES</el-button>-->

<!--                </div>-->
                <div style="display: flex">
                    <img src="../images/2.svg" style="order:1;margin-top:190px;margin-left: 100px;width: 300px;height: auto">
                    <img src="../images/1.svg" style="order:2;margin-top:170px;margin-left: 600px;width: 300px;height: auto">
                </div>
            </el-main>


        </el-container>

    </el-container>

</div>



<script type="text/javascript">


    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };



            return {
                // tableData: Array(10).fill(item),
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,


            }


        },
        methods: {
            collapse() {
                this.isCollapse = !this.isCollapse; // Toggle the value of isCollapse
                if (this.sideWidth) {
                    this.sideWidth = 64
                    // this.collapseBtnClass='el-icon-s-unfold'
                }
            },
            handleMainFormClick(){
                window.location.href="main.html"
            },
            handleAccountClick(){
                window.location.href = "account.html";
            },
            handleCategory(){
                window.location.href="category.html";
            },
            handleAllItem(){
                window.location.href="item.html";
            },
            handlePersonClick(){
                window.location.href="person.html"
            },
            handleClick(categoryId){
                switch (categoryId) {
                    case 1:
                        window.location.href = 'product.html?categoryId=BIRDS';
                        break;
                    case 2:
                        window.location.href = 'product.html?categoryId=CATS';
                        break;
                    case 3:
                        window.location.href = 'product.html?categoryId=DOGS';
                        break;
                    case 4:
                        window.location.href = 'product.html?categoryId=FISH';
                        break;
                    case 5:
                        window.location.href = 'product.html?categoryId=REPTILES';
                        break;
                    // 添加更多的 case 来处理其他的 categoryId
                }
            }

        }

        })
</script>

</body>
</html>